html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#container {
	height: 100%;
	background-color: pink;
	position: relative;
	padding: 0 18px;
	a {
		position: absolute;
		left: 14px;
		top: 20px;
		width: 72px;
		line-height: 36px;
		text-align: center;
		border: 1px solid #bbbbbb;
		border-radius: 23px;
		background-color: #fff;
		color: #000;
	}
	.males-box {
		height: 150px;
		width: 90%;
		background-color: #fff;
		position: absolute;
		bottom: 30px;
		display: flex;
		flex-direction: column;
		padding: 10px 12px;
		border-radius: 10px;
		.total-males {
			height: 1px;
			flex-grow: 1.2;
			border-bottom: 2px dashed #bbbbbb;
			display: flex;
			.left-data {
				width: 1px;
				flex-grow: 1;
				.run-text {
					color: #4294ff;
				}
				.num {
					font-size: 42px;
				}
			}
			.right-data {
				width: 1px;
				flex-grow: 1;
				display: flex;
				justify-content: right;
				align-items: center;
				color: #bbbbbb;
			}
		}
		.details {
			height: 1px;
			flex-grow: 0.8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			p {
				text-align: center;
			}
			.font-12 {
				font-size: 12px;
				color: #bbbbbb;
			}
		}
	}
}
